<template>
  <div class="profile-form">
    <h2>个人资料</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="avatar">当前头像</label>
        <div class="avatar-preview">
          <!-- 如果没有头像URL，则显示默认提示 -->
          <img :src="avatarUrl || defaultAvatar" alt="Avatar" />
          <input type="file" id="avatar-upload" ref="avatarInput" accept="image/*" style="display: none" @change="handleAvatarUpload" />
          <button type="button" class="upload-btn" @click="triggerAvatarUpload">更换头像</button>
        </div>
      </div>
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" v-model="nickname" placeholder="请输入您的昵称，例如：二姑大小" />
      </div>
      <div class="form-group">
        <label for="petname">宠物名字</label>
        <input type="petname" id="petname" v-model="petname" placeholder="请输入您的昵称，例如：猫猫" />
      </div>
      <div class="form-group">
        <label>性别</label>
        <div class="radio-group">
          <label> <input type="radio" value="男" v-model="gender" /> 男 </label>
          <label> <input type="radio" value="女" v-model="gender" /> 女 </label>
          <label> <input type="radio" value="保密" v-model="gender" /> 保密 </label>
        </div>
      </div>
      <button type="submit" class="save-button">保存</button>
    </form>
  </div>
</template>

<script>
import emitter from "@/main";

export default {
  data() {
    return {
      avatarUrl: localStorage.getItem("userAvatar") || "",
      defaultAvatar: "https://via.placeholder.com/100",
      nickname: localStorage.getItem("userNickname") || "",
      petname: localStorage.getItem("userPetname") || "",
      email: localStorage.getItem("userEmail") || "",
      phone: localStorage.getItem("userPhone") || "",
      gender: localStorage.getItem("userGender") || "保密",
    };
  },
  methods: {
    triggerAvatarUpload() {
      this.$refs.avatarInput.click();
    },
    handleAvatarUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      if (!file.type.match("image.*")) {
        alert("请选择图片文件");
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        // 创建图片对象进行裁剪
        const img = new Image();
        img.onload = () => {
          // 计算裁剪区域
          const canvas = document.createElement("canvas");
          const size = Math.min(img.width, img.height);
          canvas.width = size;
          canvas.height = size;

          const ctx = canvas.getContext("2d");
          // 居中裁剪
          ctx.drawImage(img, (img.width - size) / 2, (img.height - size) / 2, size, size, 0, 0, size, size);

          // 转换为base64
          this.avatarUrl = canvas.toDataURL("image/jpeg", 0.9);
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    handleSubmit() {
      // 保存到本地存储
      localStorage.setItem("userAvatar", this.avatarUrl);
      localStorage.setItem("userNickname", this.nickname);
      localStorage.setItem("userPetname", this.petname);
      localStorage.setItem("userGender", this.gender);

      // 触发全局事件通知其他组件更新
      emitter.emit("userInfoUpdated", {
        avatar: this.avatarUrl,
        nickname: this.nickname,
        petname: this.petname,
      });

      alert("个人信息已保存");
    },
  },
  mounted() {
    // 初始化时从本地存储加载数据
    if (localStorage.getItem("userAvatar")) {
      this.avatarUrl = localStorage.getItem("userAvatar");
    }
    if (localStorage.getItem("userNickname")) {
      this.nickname = localStorage.getItem("userNickname");
    }
    if (localStorage.getItem("userPetname")) {
      this.petname = localStorage.getItem("userPetname");
    }
    if (localStorage.getItem("userEmail")) {
      this.email = localStorage.getItem("userEmail");
    }
    if (localStorage.getItem("userPhone")) {
      this.phone = localStorage.getItem("userPhone");
    }
    if (localStorage.getItem("userGender")) {
      this.gender = localStorage.getItem("userGender");
    }
  },
};
</script>

<style scoped>
.profile-form {
  max-width: 600px;
  height: 98%;
  margin-left: 10%;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fffaf0;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #555;
}

input[type="text"],
input[type="petname"] {
  width: 80%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

input[type="text"]:focus,
input[type="petname"]:focus {
  border-color: #f4a46f;
  outline: none;
}

.avatar-preview {
  width: 100px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.avatar-preview img {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  border-radius: 50%;
  object-fit: cover;
}

.upload-btn {
  padding: 5px 10px;
  background-color: #d9c596;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.upload-btn:hover {
  background-color: #f4a46f;
}

.radio-group {
  display: flex;
  gap: 15px;
  justify-content: space-around;
}

.radio-group label {
  font-weight: normal;
  color: #333;
}

.save-button {
  display: block;
  width: 20%;
  margin: 0 auto;
  background-color: #d9c596;
  color: black;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #f4a46f;
}
</style>
